<template>
  <div class="msg">
    <van-nav-bar title="系统消息" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-cell title="来访用户">
        <template #icon>
          <img src="@/assets/img/msg-1.png" />
        </template>
      </van-cell>
      <van-cell title="评论消息" label="找到室友回复消息都在这里哦...">
        <template #icon>
          <img src="@/assets/img/msg-2.png" />
        </template>
      </van-cell>
      <van-cell title="系统消息" label="暂无新消息">
        <template #icon>
          <img src="@/assets/img/msg-3.png" />
        </template>
      </van-cell>
      <van-cell title="报修消息" label="暂无新消息">
        <template #icon>
          <img src="@/assets/img/msg-4.png" />
        </template>
      </van-cell>
      <van-cell title="话题消息" label="暂无新消息">
        <template #icon>
          <img src="@/assets/img/msg-5.png" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home/news");
    },
  },
};
</script>

<style lang="less">
.msg {
  .van-nav-bar__content {
    line-height: 36px;
    .van-icon {
      color: #000;
      font-size: 19px;
    }
    .van-nav-bar__title {
      width: 149px;
      height: 36px;
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
  }
  .van-cell {
    height: 79px;
    border: 1px solid #f6f6f6;
    img {
      margin-top: 3px;
      width: 46.5px;
      height: 46.5px;
    }
    .van-cell__title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 15px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #303030;
      .van-cell__label {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #606060;
      }
    }
  }
}
</style>
